<template>
  <div class="edu-page-warp">
    <InnerBreadcrumb v-model="pageIndex" :path="breadPath"></InnerBreadcrumb>
    <div v-show="pageIndex == '1'">
    <el-row :gutter="0">
      <el-col :span="12">
        <p class="section-title">任务统计大图</p>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-tooltip content="刷新" placement="top" effect="light">
          <el-button icon="el-icon-refresh" @click="refreshChar"></el-button>
        </el-tooltip>
        <el-button @click="goChart">学生任务列表</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in options" :key="index">
        <div class="char-box">
          <PicChart :options="item" class="chart"></PicChart>
          <div class="text-num">
            <div class="complete"><i class="dian" :style="{backgroundColor: item.color}"></i>{{item.complete}}</div>
            <div class="totle">
              <span>{{item.text}}总人数</span>
              <span>{{item.totle}}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-card shadow="never" style="margin-top: 16px;" body-style="padding: 24px;">
      <el-row :gutter="20">
        <el-col :span="7">
          <PicChart :options="taskPic" class="task-pic"></PicChart>
          <div class="showNum">
            <div class="taskNum">
              <div class="title">任务数量</div>
              <span>{{taskNum}}</span>
            </div>
            <div class="taskNum">
              <div class="title">完成人数</div>
              <span>{{completeTaskNum}}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="17">
          <el-row :gutter="40">
            <el-col :span="12" v-for="(item, index) in taskList" :key="index">
              <div class="task-item">
                <div class="tt">
                  <span>任务{{index = (index < 10 ? '0'+ (index + 1) : index + 1)}}-{{item.templateName}}</span>
                  <span class="float-right">{{item.percent}}%</span>
                </div>
                <div class="bd">
                  <div class="inner" :style="{width: item.percent + '%'}"></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    </div>
    <task-statistic v-show="pageIndex == '2'"></task-statistic>
  </div>
</template>
<script>
  import {PicChart} from "common/src/views/tools/";
  import {taskStudent,taskTotle} from "common/src/api/welcomeService/taskTemplate"
  import TaskStatistic from "./TaskStatistic";
  export default {
    name: 'TaskChart',
    components: {
      PicChart,
      TaskStatistic
    },
    data() {
      return {
        pageIndex: "1",
        breadPath: {label:'学生任务图表', key: '1', children:[ { key: '2', label:'学生任务列表'}]},
        options: [{
          domId: 'yk',
          color: '#ffbc3e',
          text: '预科',
          sizeF: 14,
          sizeP: 20,
          complete: 0,
          undone: 0,
          totle: 0
        }, {
          domId: 'bk',
          color: '#1a83f0',
          text: '本科',
          sizeF: 14,
          sizeP: 20,
          complete: 0,
          undone: 0,
          totle: 0
        }, {
          domId: 'yjs',
          color: '#67c23a',
          text: '研究生',
          sizeF: 14,
          sizeP: 20,
          complete: 0,
          undone: 0,
          totle: 0
        }, {
          domId: 'lxs',
          color: '#6f70ff',
          text: '国际学生',
          sizeF: 14,
          sizeP: 20,
          complete: 0,
          undone: 0,
          totle: 0
        }],
        taskPic: {
          domId: 'task',
          color: '#13c2c2',
          text: '完成率',
          sizeF: 18,
          sizeP: 30,
          complete: 0,
          undone: 0,
          totle: 0
        },
        taskNum: 0,
        completeTaskNum: 0,
        taskList: []
      }
    },
    methods: {
      goChart() {
        //this.$router.push('/taskStatistic')
        this.pageIndex = "2"
      },
      refreshChar() {
        this.initPage();
      },
      initPage() {
        let yk = taskStudent({trainingLevel: "预科"});
        let bk = taskStudent({trainingLevel: "本科"});
        let yjs = taskStudent({trainingLevel: "研究生"});
        let lxs = taskStudent({isStudentAbroad: 1});

        Promise.all([yk, bk, yjs, lxs])
          .then(res => {
            res.map((item, index) => {
              this.options[index].complete = item.data.complete;
              this.options[index].undone = item.data.undone;
              this.options[index].totle = item.data.count;
            })
          });

        taskTotle()
          .then(res => {
            if(res && res.data || res.code == 200) {
              this.taskNum = res.data.length;
              res.data.forEach(ele => {
                if(ele.complete != 0) {
                  ele.percent = (parseFloat(ele.complete)/parseFloat(ele.count)).toFixed(2)*100;
                  ele.percent = Math.round(ele.percent)
                } else {
                  ele.percent = 0
                }

              });
              this.taskList = res.data;
            }
          })
        taskStudent({})
          .then(res => {
            if(res && res.data) {
              this.completeTaskNum = res.data.complete;
              this.taskPic.complete = res.data.complete;
              this.taskPic.undone = res.data.undone;
            }
          })
      }
    },
    mounted() {
      this.initPage();
    }
  }
</script>
<style lang="scss" scoped>
  .char-box {
    width: 100%;
    height: 152px;
    padding: 24px;
    background-color: #ffffff;
  }

  .chart {
    float: left;
    width: 104px;
    height: 104px;
  }

  .text-num {
    margin-left: 104px;
    height: 104px;
    padding-left: 25px;
    .complete {
      position: relative;
      font-size: 30px;
      color: #262626;
      line-height: 56px;
      .dian {
        position: absolute;
        contain: '';
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #000000;
        top: 25px;
        left: -14px;
      }
    }
    .totle {
      color: #666666;
      > span {
        display: block;
      }
    }
  }

  .task-pic {
    margin: 24px 26px;
    width: 154px;
    height: 154px;

  }

  .showNum {
    margin-top: 40px;
    margin-left: 26px;
    .taskNum {
      float: left;
      margin-right: 40px;
      .title {
        font-size: 16px;
        color: #666666;
      }
      span {
        font-size: 48px;
        color: #666666;
      }
    }
  }

  .task-item {
    width: 100%;
    margin-bottom: 15px;
    .tt {
      color: #666666;
    }
    .bd {
      width: 100%;
      height: 4px;
      background-color: #e2e4e6;
      margin-top: 10px;
      .inner {
        width: 0%;
        height: 4px;
        background-color: #13c2c2;
      }
    }
  }
</style>
